<template>
  <div class="app-container">
    <!-- 顶部内容 -->
    <search-box :isMulti="true">
      <template slot="content">

        <div class="left-box">
          <el-form-item label="法人姓名：">
            <el-input v-model="searchForm.name"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主体简称：">
            <el-input v-model="searchForm.name"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主要大类：">
            <el-select v-model="searchForm.mainLabel"
                       placeholder="请选择">
              <el-option v-for="item in labelList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期：">
            <el-date-picker value-format="yyyy-MM-dd" v-model="searchForm.value1"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态：">
            <el-radio v-model="searchForm.radio"
                      label="1">停用</el-radio>
            <el-radio v-model="searchForm.radio"
                      label="2">正常</el-radio>
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini">查询</el-button>
          <el-button @click="reset()"
                     type="primary"
                     size="mini"
                     style="margin-left:20px">重置</el-button>
        </div>
      </template>
    </search-box>
    <div class="operate-btn-wrap">
      <el-button type="primary"
                 size="mini"
                 @click="addFormdialog = true"
                 icon="el-icon-plus">新增</el-button>
      <el-button type="primary"
                 size="mini"
                 icon="el-icon-delete">删除</el-button>
      <el-button type="primary"
                 size="mini"
                 icon="el-icon-warning-outline">停用</el-button>
    </div>
    <div class="table-wrap">
      <el-table :data="data"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column prop="subjectNumber"
                         label="主体编码">
        </el-table-column>
        <el-table-column prop="subjectName"
                         label="主体名称">
        </el-table-column>
        <el-table-column prop="short"
                         label="节点简称">
        </el-table-column>
        <el-table-column prop="mainLabel"
                         label="主要大类">
        </el-table-column>
        <el-table-column prop="name"
                         label="法人姓名">
        </el-table-column>
        <el-table-column prop="principal"
                         label="负责人">
        </el-table-column>
        <el-table-column prop="phone"
                         label="联系电话">
        </el-table-column>
        <el-table-column prop="operateNumber"
                         label="经营户数量">
        </el-table-column>
        <el-table-column prop="userNumber"
                         label="用户数">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <li v-if="scope.row.status === '0'"
                :class="{'status-close':scope.row.status === '0'}">停用</li>
            <li v-if="scope.row.status === '-1'"
                :class="{'status-open':scope.row.status === '-1'}">正常</li>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="scope">
            <div class="scope-operate">
              <span class="editor-box">
                <i class="el-icon-edit-outline"
                   style="color:#0095e3"
                   @click="handleEdit('1',scope.$index, scope.row)"></i>
              </span>
              <i class="el-icon-delete"
                 @click="handleEdit('1',scope.$index, scope.row)"></i>
              <i class="el-icon-warning-outline"
                 @click="handleEdit('1',scope.$index, scope.row)"></i>
            </div>

          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination background
                       :current-page="currentPage"
                       :page-sizes="[1,2,3]"
                       :page-size="2"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="data.length">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹框 -->
    <el-dialog :visible.sync="addFormdialog"
               title="新增"
               class="addFormdialog">
      <el-form ref="addForm"
               :model="detail"
               label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点主体编号："
                          prop="doctorName">
              <el-input placeholder="请输入"
                        v-model="detail.doctorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点主体名称："
                          prop="doctorName">
              <el-input placeholder="请输入"
                        v-model="detail.doctorName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主要大类："
                          prop="title">
              <el-select v-model="detail.hospitalCode"
                         placeholder="请选择医院">
                <el-option v-for="item in labelList"
                           :key="item.code"
                           :label="item.name"
                           :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点简称："
                          prop="doctorName">
              <el-input placeholder="请输入"
                        v-model="detail.doctorName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="经营地址："
                          prop="doctorName">
              <el-input placeholder="请输入"
                        v-model="detail.doctorName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期：">
              <el-date-picker v-model="searchForm.value1"
                              type="date"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期：">
              <el-date-picker v-model="searchForm.value1"
                              type="date"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="dialog-btn">
          <el-col :span="24">
            <el-form-item>
              <el-button type="info"
                         @click="addFormdialog = false"
                         size="mini">取消</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="addFormdialog = false">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import searchBox from '@/components/searchBox.vue'
export default {
  data () {
    return {
      currentPage: 1,
      listLoading: true,
      data: [
        {          subjectNumber: '350203002', subjectName: '松柏农贸市场',
          short: '松柏', mainLabel: '使用农产品', name: '张飞',
          principal: '黎明', phone: '13822889098',
          operateNumber: '258', userNumber: '28', status: '0'        },
        {          subjectNumber: '350203002', subjectName: '松柏农贸市场',
          short: '松柏', mainLabel: '使用农产品', name: '张飞',
          principal: '黎明', phone: '13822889098',
          operateNumber: '258', userNumber: '28', status: '-1'        }
      ],
      searchForm: {
        mainLabel: ''
      },
      labelList: [
        { value: '1', label: '农产品' },
        { value: '2', label: '水产品' },
        { value: '3', label: '果产品' }
      ],
      addFormdialog: false,
      detail: {}
    }
  },
  components: {
    searchBox
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.listLoading = true
      for (let index = 0; index < 6; index++) {
        this.data.push(this.data[0])
      }
    }
  }
}
</script>
